<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>品牌编辑列表</title>
    <script th:src="@{js/jquery-3.3.1.min.js}"></script>
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}">
    <script th:src="@{js/bootstrap.min.js}"></script>

</head>
<body>

<div class="container">
    <a class="btn btn-lg btn-primary" id="addbrand">添加</a>
    <table class="table">
        <caption>上下文表格布局</caption>
        <thead>
        <tr>
            <th>ID</th>
            <th>品牌名</th>
            <th>创建时间</th>
            <th>操作</th></tr>
        </thead>
        <tbody>
        <!--class="active"-->


        <tr th:each="item:${list}">
            <td th:text="${item.id}"></td>
            <td>[[${item.brand}]]</td>
            <td>[[${item.createtime}]]</td>
            <!--<td th:text="${#dates.format(item.createtime,'yyyy-MM-dd HH:mm:ss')}"></td>  这应该是时间戳字符串转化为时间  -->
            <td>
                <a class="btn btn-sm btn-primary"  th:href="@{/manageBrand?id=}+${item.id}">编辑</a>
                <a class="btn btn-sm btn-danger deleteBtn" th:href="@{/brand/delBrand?id=}+${item.id}">删除</a>
                <!--<button type="submit" class="btn btn-sm btn-danger deleteBtn">删除</button>-->
            </td>
        </tr>




    </table>



    <div class="modal fade" id="ModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 700px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        <span >品牌添加</span>
                    </h4>
                </div>

                <div class="modal-body" >

                    <div class="form-group">
                        <form id="formadd" action="/brand/addBrand" method="post">
                            <input class="form-control" name="brand"  placeholder="请输入品牌名"/>
                            <button type="submit" class="btn btn-primary">
                                提交
                            </button>
                        </form>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


        <script type="text/javascript">
            //模态框居中问题 start
            /*function centerModals() {
                $('.modal').each(function(i) {
                    var $clone = $(this).clone().css('display', 'block').appendTo('body');
                    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
                    top = top > 50 ? top : 0;
                    $clone.remove();
                    $(this).find('.modal-content').css("margin-top", top - 50);
                });
            }
            // 在模态框出现的时候调用垂直居中方法
            $('.modal').on('show.bs.modal', centerModals);
            // 在窗口大小改变的时候调用垂直居中方法
            $(window).on('resize', centerModals);
            //模态框居中问题end
*/

            //$("#ModalSet").modal('show');

            $("#addbrand").click(function(){
                $("#ModalAdd").modal('show');
            });

            //onclick='seaf(${item.id})'
            function seaf(n){
                alert(n);
                $.ajax({
                    type : "POST",
                    url  : "/brand/manageBrand",
                    data : {
                        "id" : n
                    },
                    dataType: "json",
                    success : function(result) {
                        document.getElementById("bvalue").innerHTML = result;
                        //document.getElementById("bvalue").innerHTML = result;
                        $("#ModalSet").modal('show');
                    }
                });

            }

        </script>
</div>
</body>
</html>